<template>
  <div id="building">
    
      <h3 class="sezi1">
          <b>登录主页面</b>
          </h3>
      <br />
     
      用户名<el-input type="text" v-model="username"  style="width:180px"/> <br /><br /><br /><br />
      密&emsp;码<el-input type="password" v-model="password" style="width:180px" /> <br /><br /><br />
      <el-button @click="log" type="warning" round>登录</el-button>
      
      
        <el-button @click="gores" style="width:180px" type="warning" round>点我前去注册页面！</el-button>
    
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      username: "",
      password: "",
    };
  },
  props: {},

  components: {},

  created() {},

  mounted() {},

  methods: {
    log() {
      if ((this.password == "")) {
        alert("用户名密码不能为空");
      } else {
        this.axios
          .post("http://127.0.0.1:8000/rbac/v1/login/", {
            username: this.username,
            password: this.password,
          })
          .then((res) => {
            
              alert("登录成功");
              console.log(res);
              this.$router.push("/mainhome");
             
            
          })
          .catch((err) => {
            alert("登录失败");
            console.log(err);
          });
      }
    },
    gores() {
      this.$router.push("/");
    },
  },

  computed: {},

  watch: {},

  directives: {},

  filters: {},
};
</script>

<style scoped >
.div1 {
  background-color: rgb(116, 186, 219);
  height: 1000px;
}
#building{
  background:url("../assets/veer-300207069.jpg");
  width:100%;
  height:100%;
  position:fixed;
  background-size:100% 100%;
  
}
#Register {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 0px;
}
body{
  margin:0;
  padding:0;
  border:0
}
.sezi1{
    color: rgba(231, 145, 33, 0.931);
}
</style>
